﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">
    <title></title>
    <link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jqueryUI/js/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="../../Scripts/verticaltabs.pack.js"></script>
    <link rel="stylesheet" href="../../Content/css/verticaltabs.css" />
<script type="text/javascript">
    $(document).ready(function () {
        $("#textExample").verticaltabs({ speed: 1, slideShow: false, activeIndex: 2 });
    });
</script>
</head>

<body>
    <div>
        <h2>Index</h2>

          <!-- Text Example -->
	<div class="verticalslider" id="textExample">
        <ul class="verticalslider_tabs">
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Praesent Pulvinar</a></li>
            <li><a href="#">Nunc Adipiscing</a></li>
            <li><a href="#">Praesent Dapibus</a></li>                        
        </ul>
        <ul class="verticalslider_contents">
            <li>
            <h2>Lorem Ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan placerat bibendum. Etiam ut nunc sed purus tempus varius. Donec id magna massa, posuere consectetur neque. Mauris tortor lacus, iaculis a pulvinar luctus, lobortis vel velit. In elementum lorem eu felis fermentum placerat et sit amet ligula. Integer euismod augue eu massa tincidunt consectetur. Suspendisse potenti. Donec in enim sollicitudin enim dignissim imperdiet ut et dolor. Phasellus nec risus vel nunc hendrerit auctor. Sed rhoncus sapien at nisl aliquam luctus. </p></li>
            <li>
            <h2>Praesent Pulvinar</h2>
            <p>Praesent pulvinar, lorem nec ullamcorper semper, ipsum erat vestibulum lacus, in sodales lorem mi in leo. Vestibulum et rhoncus tellus. Curabitur mauris enim, vehicula sit amet euismod a, eleifend at dui. Vivamus sollicitudin, nunc pharetra porttitor lobortis, felis odio hendrerit mi, id ultricies urna enim quis lectus. Suspendisse convallis ipsum egestas velit fermentum ac volutpat dui dictum. Pellentesque sed ultrices justo. Ut lacus odio, porttitor quis tincidunt at, imperdiet vel eros. Duis ac velit neque. Integer semper egestas odio id suscipit. Maecenas eu diam in urna fringilla viverra eget sit amet ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></li>
            <li>
            <h2>Nunc Adipiscing</h2>
            <p>Nunc adipiscing purus id orci rutrum placerat. Nam posuere elementum ipsum quis faucibus. Fusce fermentum turpis ac erat mollis sit amet varius mi placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ante justo, varius quis dignissim nec, condimentum in dui. Nulla sed lectus eu nunc vehicula vulputate vel nec velit. Integer eu purus nunc. Donec odio augue, sagittis pellentesque adipiscing id, dignissim vel enim. Maecenas a risus est.</p></li>
            <li>
            <h2>Praesent Dapibus</h2>
            <p>Praesent dapibus metus vitae velit blandit tempor. Donec dignissim tempus neque, a vestibulum massa aliquam sed. Vestibulum velit quam, facilisis vel pharetra nec, bibendum eget mauris. In vitae ligula ac justo varius ullamcorper. Nullam vitae urna eu metus pellentesque vehicula vel sit amet nibh. Cras nec velit dictum neque imperdiet congue in nec eros. Suspendisse ante felis, eleifend sed pellentesque id, sagittis ut magna. .</p></li>                        
        </ul>
    </div> 

    <input type="text" id="Passion" />

    <script type="text/javascript" language="javascript">
        $(function () {

            $("#Passion").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "/home/findinterests", type: "POST", dataType: "json",
                        data: { searchText: request.term, maxResults: 10 },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return { label: item.Name, value: item.Name, id: item.Id }
                            }))
                        }
                    })
                },
                select: function (event, ui) {
                    alert(ui.item ? ("You picked '" + ui.item.label + "' with an ID of " + ui.item.id)
                        : "Nothing selected, input was " + this.value);
                }
            });

        });
    </script>

    </div>
</body>
</html>
